<template>

  <div>
    <h1>toRef、toRefs使用</h1>
    <h3>姓名：{{name}}</h3>
    <h3>年龄：{{age}}</h3>
<!--    <h3>薪资：{{salary}}</h3>-->
    <h3>薪资：{{job.a.salary}}</h3>
    <button @click="name+='!'">改变姓名</button>
    <button @click="age++">改变年龄</button>
<!--    <button @click="salary+=1">改变薪资</button>-->
    <button @click="job.a.salary+=1">改变薪资</button>

  </div>

</template>

<script>

import {ref,reactive,toRef,toRefs} from 'vue'

export default {
  name: "demo06",
  setup(){

    let person = reactive({
      name: '张三',
      age: 23,
      job:{
        a:{
          salary: 20
        }
      }
    })

    // console.log(person.name)
    //
    // const name2 = toRef(person,'name');
    // console.log('####',name2)

    const x = toRefs(person)
    console.log(x)

    return {
      // name:toRef(person,'name'),
      // age:toRef(person,'age'),
      // salary: toRef(person.job.a,'salary'),

      ...toRefs(person)
    }
  }
}
</script>

<style scoped>

</style>